/* GRID */

.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }

/* COLUMNS */

.col {
	display: block;
	float:left;
}

.col:first-of-type {
  margin-left: 0;
}



/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* ALL */

.row .three{
  padding: 80px 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #2c3e50;
  color: #ecf0f1;
}
.hamburger{
	transform: translateY(-5px);
	-o-transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	z-index: 99999 !important;
	transition: top .5s;
	-o-transition: top .5s;
	-moz-transition: top .5s;
	-webkit-transition: top .5s;
	-ms-transition: top .5s;
	position: relative;
}
.hamburger .line.open{
	background-color: #333333;
}
.hamburger .line{
  width: 27px;
  height: 3px;
  background-color: #333333;
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger .line:nth-child(1){
  background-color: #333333;
}

.hamburger .line:nth-last-of-type(1){
  background-color: #333333;
}

.hamburger.is-active .line:nth-child(1){
  background-color: #333333;
}


.hamburger:hover{
  cursor: pointer;
}
.hamburger .line:nth-child(2){
  width: 17px;
}
/* ONE */

.hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(11px) rotate(45deg);
  -ms-transform: translateY(11px) rotate(45deg);
  -o-transform: translateY(11px) rotate(45deg);
  transform: translateY(11px) rotate(45deg);
  background-color: #fff;
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-11px) rotate(-45deg);
  -ms-transform: translateY(-11px) rotate(-45deg);
  -o-transform: translateY(-11px) rotate(-45deg);
  transform: translateY(-11px) rotate(-45deg);
  background-color: #fff;
}

.hamburger::after{
	content: "";
	position: absolute;
	top: -27px;
	left: -28px;
	background-color: rgba(0,0,0,0);
	width: 78px;
	height: 78px;
	z-index: -1;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.hamburger.is-active::after{
	background-color: rgba(0,67,153,1);
}
@media screen and (max-width: 767px) {
	.hamburger::after{
		top: -25px;
		left: -24px;
		width: 74px;
		height: 74px;
	}
}
@media screen and (max-width: 575px) {
	.hamburger .line:nth-child(2){
	  width: 14px;
	}
	.hamburger .line{
	  margin-top: 6px;
	  margin-bottom: 6px;
	  width: 24px;
	  height: 2px;
	}
	.hamburger.is-active .line:nth-child(1){
	  -webkit-transform: translateY(8px) rotate(45deg);
	  -ms-transform: translateY(8px) rotate(45deg);
	  -o-transform: translateY(8px) rotate(45deg);
	  transform: translateY(8px) rotate(45deg);
	}
	
	.hamburger.is-active .line:nth-child(3){
	  -webkit-transform: translateY(-8px) rotate(-45deg);
	  -ms-transform: translateY(-8px) rotate(-45deg);
	  -o-transform: translateY(-8px) rotate(-45deg);
	  transform: translateY(-8px) rotate(-45deg);
	}
	.hamburger::after{
		top: -25px;
		left: -23px;
		width: 70px;
		height: 70px;
	}
}